<template>
    <div>
        <detail-banner></detail-banner>
        <detail-head :sightName="sightName"></detail-head>
        <detail-list :categoryList="categoryList"></detail-list>
        <div style="height:800px"></div>
    </div>
</template>

<script>
    import DetailBanner from './components/Banner'
    import DetailHead from './components/Head'
    import DetailList from './components/List'
    import axios from 'axios'
    export default {
        name: "Detail",
        components:{
            DetailBanner,
            DetailHead,
            DetailList,
        },
        data(){
            return{
                sightName:'',
                bannerImg:'',
                gallaryImgs:[],
                categoryList:[]
            }
        },
        methods:{
            getDetailInfo(){
                axios.get('/api/detail.json').then(this.getDetailInfoSucc)
            },
            getDetailInfoSucc(res){
                let data=res.data;
                if(data.ret){
                    data=data.data
                    this.sightName=data.sightName
                    this.bannerImg=data.bannerImg
                    this.gallaryImgs=data.gallaryImgs
                    this.categoryList=data.categoryList
                }
            }
        },
        mounted(){
            this.getDetailInfo()
        }
    }
</script>

<style scoped>

</style>